<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统文件管理</title>
    <jsp:include page="/resources/inc/head.jsp" />
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/metroStyle/metroStyle.css" rel="stylesheet"/>
</head>
<body>
<aside id="iframe_aside" class="sidebar1">
    <div class="zTreeDemoBackground left">
        <ul id="aside_tree" class="ztree"></ul>
    </div>
</aside>
<div id="main">
    <div id="toolbar">
        <a class="waves-effect waves-button" href="javascript:;"
           onclick="Common.openPage({url:'${basePath}/manage/oss/file/personal/upload',title:'上传文件',param:getChecked()})">
            <i class="zmdi zmdi-upload"></i>上传文件
        </a>
        <a class="waves-effect waves-button" href="javascript:;"
           onclick="Common.openPage({url:'${basePath}/manage/oss/file/personal/createFolder',title:'新建文件夹',param:getChecked(),length:'50%'})">
            <i class="zmdi zmdi-plus"></i>新建文件夹
        </a>
        <a class="waves-effect waves-button" href="javascript:;"
           onclick="shareFile()">
            <i class="zmdi zmdi-accounts"></i>分享文件
        </a>
        <a class="waves-effect waves-button" href="javascript:;" onclick="fileDelete()">
            <i class="zmdi zmdi-file"></i>删除文件
        </a>
        <a class="waves-effect waves-button" href="${basePath}/manage/oss/file/personal/viewShareFiles">
            <i class="zmdi zmdi-view-list-alt"></i>分享文件管理
        </a>
    </div>
    <table id="table" class="table table-bordered table-hover table-striped"
           style="word-break:break-all;"></table>
</div>
<jsp:include page="/resources/inc/footer.jsp" />
<script src="${basePath}/resources/zheng-admin/js/my-ztree-common.js"></script>
<script>
    var query = {};
    var $table = $('#table');
    var zNodes = [];
    var treeObj;
    var checkedNode;
    var folderId = ${folderId};
    var folderType = ${folderType};
    $(function () {
        // bootstrap table初始化
        $table.bootstrapTable({
            url: '${basePath}/manage/oss/file/personal/list',
            height: getHeight(),
            striped: true,//隔行变色
            search: true,
            showRefresh: true,
            showColumns: true,//是否显示 内容列下拉框
            minimumCountColumns: 2,//当列数小于此值时，将隐藏内容列下拉框
            clickToSelect: true,//设置true 将在点击行时，自动选择rediobox 和 checkbox
            detailView: true,//设置为 true 可以显示详细页面模式。
            detailFormatter: 'detailFormatter',//格式化详细页面模式的视图。
            pagination: true,//设置为 true 会在表格底部显示分页条
            paginationLoop: false,//设置为 true 启用分页条无限循环的功能。
            sidePagination: 'server',
            silentSort: false,//设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效.
            smartDisplay: false,//True to display pagination or card view smartly.
            escape: true,//转义HTML字符串，替换 &, <, >, ", `, 和 ' 字符.
            searchOnEnterKey: true,//设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
            idField: 'id',//指定主键列
            maintainSelected: true,//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
            toolbar: '#toolbar',
            queryParamsType: "",
            queryParams: function (params) {
                params.id = query.id;
                return params;
            },
            columns: [
                {field: 'ck', checkbox: true},
                {
                    field: 'filename', title: '文件名', width: "40%",
                    formatter: function (value, row, index) {
                        var filename = row.filename;
                        var url = row.url;
                        var id = row.id;
                        var type = row.file_type;
                        var name;
                        if (folderType == type) {
                            name = '<a href="javascript:;" onClick="openFolder(' + id + ')">' +
                                    '<img src="${basePath}/resources/manage/image/folder.png" style="margin-bottom: 3px;">'
                                    + filename +
                                    '</a>'
                        } else {
                            name = '<a href="' + url + '?attachment=' + encodeURIComponent(filename) + '" target="_black">' +
                                    '<img src="${basePath}/resources/manage/image/file.png" style="margin-bottom: 3px;">' +
                                    filename+ '</a>';
                        }
                        return name;
                    }
                },
                {
                    field: 'size', title: '文件大小', align: 'center', width: "10%",
                    formatter: function (value, row, index) {
                        var size = row.size;
                        return sizeFormat(size);
                    }
                },
                {
                    field: 'ctime',
                    title: '创建时间',
                    align: 'center',
                    sortable: true,
                    width: "20%",
                    formatter: 'timeFormatter'
                },
                {
                    field: 'action',
                    title: '操作',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false
                }
            ]
        });
        updateFolderTree();
        treeObj = $.fn.zTree.init($("#aside_tree"), {
            async: {
                enable: true,
                url: "${basePath}/manage/oss/file/personal/folderList",//异步加载时的请求地址
                type: 'get',
                dataType: 'json',
                autoParam: ["checkedNodeId", "id"]
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode, clickFlag) {
                    openFolder(treeNode.id);
                }
            }
        }, zNodes);
        checkedNode = treeObj.getNodeByParam("id", folderId, null);
    });
    var updateData = {
        title: "编辑文件",
        url: "${basePath}/manage/oss/file/personal/update",
        length:"40%"
    };
    // 格式化操作按钮
    function actionFormatter(value, row, index) {
        updateData.param = Common.getParam({id: row.id});
        var html = "";
        html += getPageHtml(updateData) + "  ";
        return html;
    }
    function updateFolderTree() {
        $.ajax({
            url: "${basePath}/manage/oss/file/personal/folderList",
            type: "GET",
            dataType: "JSON",
            async: false,
            success: function (folders) {
                zNodes = folders;
            }
        });
    }
    function openFolder(id) {
        query.id = id;
        $table.bootstrapTable('refresh', {query: query});
        //如果没有选中树，选中它
        var node = treeObj.getNodeByParam("id", id, null);
        treeObj.selectNode(node);

        checkedNode = node;
        folderId = id;
    }
    function fileDelete() {
        var rows = $table.bootstrapTable('getSelections');
        if (rows.length < 1) {
            layer.msg('请选择删除的文件！', {icon: 5});
        } else {
            var ids = [];
            for (var i in rows) {
                ids.push(rows[i].id);
            }
            layer.confirm('确定删除么？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: "${basePath}/fastdfs/delete/" + ids.join("-"),
                    type: "GET",
                    success: function (res) {
                        if (res.code == 1) {
                            layer.msg(res.data, {icon: 1});
                            refreshTree();
                            $table.bootstrapTable('refresh');
                        } else {
                            layer.msg(res.data, {icon: 5});
                        }
                    },
                    fail: function (res) {
                        layer.msg("删除失败！", {icon: 5});
                    }
                });
            }, function () {

            });
        }

    }
    //todo把方法添加进去
    function refreshTree() {
        var rootNode = treeObj.getNodes()[0];
        if (checkedNode) {
            checkedNode.isParent = true;
            rootNode.checkedNodeId = checkedNode.id;
            treeObj.reAsyncChildNodes(rootNode, "refresh");
        }
    }

    function getChecked() {
        return Common.getParam({folderId: folderId});
    }
    function getSelectId() {
        var rows = $table.bootstrapTable('getSelections');
        //删除文件夹选择
        var ids = [];
        if (rows.length < 0) {
            return "";
        }
        for (var i in rows) {
            if (rows[i].file_type != folderType) {
                ids.push(rows[i].id);
            }
        }
        if (rows.length < 0) {
            return "";
        }
        return ids.join("-");
    }
    function shareFile() {
        var fileIds = getSelectId();
        if (fileIds.length < 1) {
            layer.msg("请选择分享文件", {icon: 5});
            return;
        }
        Common.openPage({
            url: '${basePath}/manage/oss/file/personal/shareFile',
            title: '分享文件',
            param: Common.getParam({fileIds: fileIds}),
            length: '60%'
        });
    }
</script>
</body>
</html>